<script setup lang="ts">
import { onBeforeMount, ref, watchEffect } from "vue";
import type { FlowModelNode } from "../../ProcessDef";
import { queryFormItemList } from "@/api/flow/form/";
import { getRandNodeId } from "@/utils/process";
import { getFormItemLabel } from "@/views/design/form/FormItem";

const props = defineProps({
  //表单字段列表
  defFlow: Object,
  defaultPermType: {
    type: String,
    //默认加载的字段权限
    default: "R"
  },
  defaultDisplayType: {
    type: String,
    //默认加载的字段权限
    default: "S"
  }
});

const _value = defineModel<FlowModelNode>();
const permType = ref("R");
const displayType = ref("S");

const queryFormFieldData = () => {
  console.log("node formItemList", _value.value.props.formItemList);
  if (!_value.value.props.formItemList || _value.value.props.formItemList.length === 0) {
    _value.value.props.formItemList = [];
    if (_value.value.props.formItemList.length === 0) {
      queryFormItemList(props.defFlow.formId).then(res => {
        if (res.code === 200) {
          _value.value.props.formItemList = res.data;
          _value.value.props.formItemList.forEach(v => {
            v.fieldCode = getRandNodeId();
            v.permType = props.defaultPermType;
            v.displayType = props.defaultDisplayType;
          });
        }
      });
    }
  }
};

watchEffect(() => {
  queryFormFieldData();
});

//加载的时候判断，赋默认值
onBeforeMount(() => {
  queryFormFieldData();
});

function handleChangeAllPermType(val) {
  _value.value.props.formItemList.forEach(v => (v.permType = val));
}

function handleChangeAllDisplayType(val) {
  _value.value.props.formItemList.forEach(v => (v.displayType = val));
}
</script>

<template>
  <div>
    <div v-if="_value.props.formItemList.length > 0">
      <el-table
        :header-cell-style="{ background: '#f5f6f6' }"
        :data="_value.props.formItemList"
        border
        style="width: 100%"
      >
        <el-table-column prop="label" show-overflow-tooltip label="表单字段" width="170">
          <template #default="scope">
            {{ getFormItemLabel(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="permType" label="只读/编辑">
          <template #header>
            <el-switch
              v-model="permType"
              active-text="编辑"
              inactive-text="只读"
              active-value="E"
              inactive-value="R"
              @change="handleChangeAllPermType"
            />
          </template>
          <template #default="scope">
            <el-switch
              v-model="scope.row.permType"
              active-text="编辑"
              inactive-text="只读"
              active-value="E"
              inactive-value="R"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="displayType" label="隐藏/显示">
          <template #header>
            <el-switch
              v-model="displayType"
              active-text="显示"
              inactive-text="隐藏"
              active-value="S"
              inactive-value="H"
              @change="handleChangeAllDisplayType"
            />
          </template>
          <template #default="scope">
            <el-switch
              v-model="scope.row.displayType"
              active-text="显示"
              inactive-text="隐藏"
              active-value="S"
              inactive-value="H"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-empty v-else description="表单字段为空" style="margin: 10px 30px" />
  </div>
</template>

<style scoped lang="scss"></style>
